<template>
  <div class="hello">
    <h1>{{ masg }}</h1>
    <button v-on:click="onClickMe">ClickMe!</button>
    <h2>{{ msgfomfather }}</h2>
    <p id="pp"></p>
    <el-input type="text" id="txt_Search" onblur="test('')" onclick="test('txt_Search')" v-model="masg" clearable/>
    <input type="text" id="txtSearchB" onblur="test('')" onclick="test('txtSearchB')" />
    <el-button @click="onClickMe">wde</el-button>
    <el-button class="button" :class="{'disabled' : !this.canClick}" @click="countDown">{{content}}</el-button>
  </div>
</template>
<script>
import HelloWorldA from './helloWorldA'
export default {
  name: 'l',
  data () {
    return {
      masg: 'HelloWorld',
      content: '发送验证码',
      totalTime: 10,
      canClick: true // 添加canClick
    }
  },
  components: {
    HelloWorldA
  },
  props: ['msgfomfather'],
  methods: {
    onClickMe () {
      alert(this.masg)
      this.reciprocal()
    },
    countDown () {
      if (!this.canClick) return // 改动的是这两行代码
      this.canClick = false
      this.content = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.content = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.content = '重新发送验证码'
          this.totalTime = 10
          this.canClick = true // 这里重新开启
        }
      }, 1000)
    }
  },
  getMovieDeta () {
    alert('1')
    this.methods.getMovieDetail()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed;
}
</style>
